import React from 'react'
import { Button, SearchBar } from 'antd-mobile'
import { useSelector, useDispatch } from "react-redux";
import { NavBar, Space, Toast } from 'antd-mobile'
import { useLoaderData, useNavigate } from 'react-router-dom';
import Lunbo from '../home/conpoment/Lunbo'
import { getLbtApi } from '../../api/qqApi';
function Index() {
    const nav = useNavigate()
    const list = useSelector((store) => store.counter.list);
    const start = useSelector((store) => store.counter.start);
    const end = useSelector((store) => store.counter.end);
    const date = useSelector((store) => store.counter.date);
    const isSpeed = useSelector((store) => store.counter.isSpeed);
    const dispatch = useDispatch();
    // 定义一个名为tz的函数
    const tz = () => {
      nav('/city')
    }
    return (
        <div>
            <NavBar> <SearchBar placeholder='请输入内容' /></NavBar>
            <div style={{
                width: '100%', height: '40px', overflow: 'scroll'
                , background: '#f1f1f1', alignContent: 'center', textAlign: 'center'
            }}>
                <span style={{
                    width: '100px', height: '50px', padding: '5px'
                    , margin: '5px', background: '#ccc', borderRadius: '50px'
                }}
                    onClick={()=>nav('/city')}
                >{start}</span>

                <span style={{
                    width: '100px', height: '50px', padding: '5px'
                    , margin: '5px', background: '#ccc', borderRadius: '50px'
                }} onClick={()=>nav('/city')}>{end}</span>
                {
                    list.map((item, index) => {
                        return <span style={{
                            width: '100px', height: '50px', padding: '5px'
                            , margin: '5px', background: '#ccc', borderRadius: '50px'
                        }} key={index} onClick={tz}>{item}</span>
                    })
                }
            </div>
            <div style={{ width: '100%', height: '60px', display: 'flex', margin: '10px', justifyItems: "center", background: '#fef3f8', }}>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fa4633' }}>旅游</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fa4633' }}>跟团游</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fa4633' }}>自由行</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fa4633' }}>定制包团</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fa4633' }}>自驾游</span>
            </div>
            <div style={{ width: '100%', height: '60px', display: 'flex', margin: '10px', justifyItems: "center", background: '#fef3f8', }}>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fb9447' }}>票务</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fb9447' }}
                onClick={()=>nav(`/cart?start=${start}&end=${end}&date=${date}&isSpeed=${isSpeed}`)}
                >
                    景区门票</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fb9447' }}>机票</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fb9447' }}>火车票</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#fb9447' }}>船票</span>
            </div>
            <div style={{ width: '100%', height: '60px', display: 'flex', margin: '10px', justifyItems: "center", background: '#fef3f8', }}>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#f37585' }}>住宿</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#f37585' }}>酒店</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#f37585' }}>海外住宿</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#f37585' }}>民宿</span>
                <span style={{ width: '60px', height: '60px', margin: '5px', textAlign: 'center', alignContent: 'center', background: '#f37585' }}>钟点房</span>
            </div>
            <div style={{ width: '100%', height: '40px', alignContent: 'center', textAlign: 'center' }}>
                <span style={{
                    width: '100px', height: '50px', padding: '5px'
                    , margin: '10px', color: 'purple'
                }} >签证</span>
                <span style={{
                    width: '100px', height: '50px', padding: '5px'
                    , margin: '10px', color: 'purple'
                }} >租车</span>
                <span style={{
                    width: '100px', height: '50px', padding: '5px'
                    , margin: '10px', color: 'purple'
                }}>团建/年会</span>
                <span style={{
                    width: '100px', height: '50px', padding: '5px'
                    , margin: '10px', color: 'purple'
                }}>演出赛事</span>
                <span style={{
                    width: '100px', height: '50px', padding: '5px'
                    , margin: '10px', color: 'purple'
                }}>拍摄</span>
            </div>
            <div>
                <Lunbo></Lunbo>
            </div>

        </div>
    )
}

export default Index

export const loader = async () => {
    const { data: res } = await getLbtApi()
    console.log(res);
    return { lists: res }
}